Skip to content

fix: add hover states to navbar links#583

Merged
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
HarshalKushwaha0027:fix-navigation-bar-hover-state-on-links
May 31, 2026
Merged

fix: add hover states to navbar links#583
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
HarshalKushwaha0027:fix-navigation-bar-hover-state-on-links

Conversation

@HarshalKushwaha0027
Copy link
Copy Markdown
Contributor

@HarshalKushwaha0027 HarshalKushwaha0027 commented May 27, 2026 •
edited
Loading

Related Issue

Description

Added interactive hover states to the main navigation links (Tracker, Contributors, Login) to improve UX and accessibility.

Previously, inactive links lacked visual feedback on hover due to conflicting Tailwind text classes and missing dark mode hover rules. I refactored the navLinkStyles in Navbar.tsx to strictly apply hover:text-blue-600 and hover:bg-gray-50 (along with their respective dark: mode variants) only to the inactive state, resolving the conflict.

How Has This Been Tested?

  • Ran the local development server (npm run dev).
  • Verified hover text and background color transitions on all inactive tabs.
  • Tested both Light Mode and Dark Mode to ensure contrast and consistency.

Screenshots

Recording.2026-05-28.015950.mp4

Type of Change

  • Bug fix
  • New feature
  • Code style update
  • Breaking change
  • Documentation update

Summary by CodeRabbit

  • Style
    • Updated navigation link hover styling to provide enhanced visual feedback for inactive menu items across light and dark modes.

Review Change Stack

@netlify
Copy link
Copy Markdown

netlify Bot commented May 27, 2026 •
edited
Loading

❌ Deploy Preview for github-spy failed.

Name Link
🔨 Latest commit c1b05d0
🔍 Latest deploy log https://app.netlify.com/projects/github-spy/deploys/6a1c0d7d27e73900080aa128

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 27, 2026 •
edited
Loading

Warning

Review limit reached

@mehul-m-prajapati, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 43 minutes and 49 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6d49aeea-e083-4d25-bef7-4025705305a8

📥 Commits

Reviewing files that changed from the base of the PR and between ad4e0b8 and c1b05d0.

📒 Files selected for processing (1)
  • src/components/Navbar.tsx
📝 Walkthrough

Walkthrough

The PR updates inactive navigation link styling in the Navbar component. Hover interactions now display text-blue-600 text color and bg-gray-50 background (with dark-mode variants), replacing the previous simpler inactive hover appearance.

Changes

Navbar Inactive Link Hover Styling

Layer / File(s) Summary
Inactive nav link hover styling
src/components/Navbar.tsx		 The navLinkStyles inactive branch updates hover text color to hover:text-blue-600 and adds hover background styling (hover:bg-gray-50 plus dark-mode equivalents) for improved visual feedback.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related issues

Possibly related PRs

Suggested labels

level:intermediate, type:accessibility, type:bug, quality:clean

Poem

A rabbit hops through nav so fine,
Hovers now with blue outline,
Gray backgrounds greet the weary eye,
Dark mode shines as time goes by. ✨🐰

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning The PR claims to close #548, which reports a blank login screen due to missing ArrowLeft import, but the changes only modify Navbar hover states unrelated to the login error. Review whether #548 is the correct linked issue. The PR changes do not address the ArrowLeft import error described in #548; verify the intended issue or add the missing login page fix.
Out of Scope Changes check ⚠️ Warning The navbar hover state changes are unrelated to issue #548's ArrowLeft import error, representing a scope mismatch between stated objectives and actual code changes. Either correct the linked issue to match the navbar changes or add the missing ArrowLeft import fix to address the stated issue #548.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title 'fix: add hover states to navbar links' accurately describes the main change—adding hover styling to navbar links—and is clear and specific.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed The pull request description covers all required template sections with relevant details about the changes, testing, and type of change classification.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

github-actions[bot]
github-actions Bot reviewed May 27, 2026
View reviewed changes
Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thank you @HarshalKushwaha0027 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

@mehul-m-prajapati mehul-m-prajapati merged commit 0b436a5 into GitMetricsLab:main May 31, 2026
1 of 6 checks passed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 31, 2026

🎉🎉 Thank you for your contribution! Your PR #583 has been merged! 🎉🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

Assignees

No one assigned

Labels

gssoc:approved level:beginner quality:clean type:accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug Report: Missing Hover States on Navbar Links

2 participants

@HarshalKushwaha0027 @mehul-m-prajapati